<template>
  <div id="fcontainer">
    <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[10, 20, 30, 40]"
    :page-size="10"
    layout="total, sizes, prev, pager, jumper"
    :total="100">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    },
    mounted(){
       
    },
    data() {
      return {
        currentPage:1
      };
    }
  }
</script>

<style lang="less">
#fcontainer{
    height: 70px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: #fff;
    border-radius: 5px;
    .el-pagination{
        padding-right: 20px;
        .el-icon-arrow-left,.el-icon-arrow-right{
            border: 1px solid #a8a8a8 !important;
            width: 26px;
            height: 26px;
            text-align: center;
            line-height: 26px;
            padding: 0;
            min-width: 26px;
            color: #9c9c9c;
        }
        ul.el-pager li.number{
            border: 1px solid #a8a8a8 !important;
            width: 28px;
            height: 28px;
            text-align: center;
            line-height: 26px;
            padding: 0;
            margin: 0 7px 0 0;
            min-width: 26px;
            color: #9c9c9c;
            font-size: 12px;
        }
        ul.el-pager li.active{
            color: #333;
        }
    }
}
</style>>

